import { Card, Row, Col } from 'antd';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
import SearchRanking from './SearchRanking';

// 模拟搜索量数据，移除月份显示
const searchData = [
  { name: '', 搜索量: 180000000 },
  { name: '', 搜索量: 195000000 },
  { name: '', 搜索量: 190000000 },
  { name: '', 搜索量: 185000000 },
  { name: '', 搜索量: 193782634 },
  { name: '', 搜索量: 192000000 },
];

const SearchStats: React.FC = () => {
  return (
    <Card size="small" className="search-stats-card" style={{ height: 340 }}>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <div style={{ fontSize: 16, fontWeight: 500 }}>
            搜索量
            <span style={{ marginLeft: 10, fontSize: 14 }}>193,782,634 次</span>
          </div>
        </Col>
        <Col span={24} style={{ paddingBottom: 0, marginTop: 5 }}>
          <Row gutter={[16, 0]}>
            <Col span={12}>
              <div className="chart-container" style={{ height: 70 }}>
                <ResponsiveContainer width="100%" height="100%">
                  <AreaChart data={searchData} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                    <XAxis dataKey="name" tick={{ fontSize: 12 }} />
                    <YAxis hide={true} />
                    <Tooltip formatter={(value) => [`${value.toLocaleString()}`, '搜索量']} />
                    <Area type="monotone" dataKey="搜索量" stroke="#3b82f6" strokeWidth={2} dot={false} fill="url(#colorUv)" />
                    <defs>
                      <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.2}/>
                        <stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/>
                      </linearGradient>
                    </defs>
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </Col>
            <Col span={12}>
              <div className="chart-container" style={{ height: 70 }}>
                <ResponsiveContainer width="100%" height="100%">
                  <AreaChart data={searchData} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                    <XAxis dataKey="name" tick={{ fontSize: 12 }} />
                    <YAxis hide={true} />
                    <Tooltip formatter={(value) => [`${value.toLocaleString()}`, '搜索量']} />
                    <Area type="monotone" dataKey="搜索量" stroke="#3b82f6" strokeWidth={2} dot={false} fill="url(#colorUv)" />
                    <defs>
                      <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.2}/>
                        <stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/>
                      </linearGradient>
                    </defs>
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </Col>
          </Row>
        </Col>
        <Col span={24} style={{ marginTop: 10 }}>
          <SearchRanking />
        </Col>
      </Row>
    </Card>
  );
};

export default SearchStats;